<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>垂直整屏幕切换效果仅第一页</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style type="text/css">
	#container1{background-color:#BFDA00;}
	#container2{
		background-color:#2EBE21;
		height: 1024px;
	}
	#container3{
		background-color:antiquewhite;
		  margin: 20px;
	}
</style>


</head>
<body>
	<div id="container1" >123</div>
<div id="container2" >456
	<div id="container3"></div>
</div>
</body>
<script type="text/javascript">
    var total = $(window).height();
    $("#container1").css("height",total+"px");
    $("#container3").css("height",total+"px");
    if (window.addEventListener) { //这里给两个div添加鼠标滚轮事件，for mozilla
        document.getElementById("container1").addEventListener('DOMMouseScroll', wheel, false); 
        document.getElementById("container2").addEventListener('DOMMouseScroll', wheel2, false); 
    }  
   document.getElementById("container1").onmousewheel = document.onmousewheel = wheel;//与上面代码一样，for IE/Opera
   document.getElementById("container2").onmousewheel = document.onmousewheel = wheel2;   
        function wheel(event) {  
            var delta = 0;  
            if (!event) //For IE 
                event = window.event;  
            if (event.wheelDelta) { //for IE/Opera IE是以120为间隔
                delta = event.wheelDelta / 120;  
            } else if (event.detail) { //for Mozilla 火狐中是以3位间隔 
                delta = -event.detail / 3;  
            }   
            if (delta) {
                handle(delta);
            }
            // if(event.preventDefault){
            //     event.preventDefault();//阻止滚动事件的默认滚动效果
            // }
            // event.returnValue =false; 
        }  
        function wheel2(event) {  
            var delta = 0;  
            if (!event) //For IE 
                event = window.event;  
            if (event.wheelDelta) { //for IE/Opera IE是以120为间隔
                delta = event.wheelDelta / 120;  
            }else if (event.detail) { //for Mozilla 火狐中是以3位间隔 
                delta = -event.detail / 3;  
            }   
            if (delta) {
                handle2(delta);
            }
            // if(event.preventDefault){
            //     event.preventDefault();//阻止滚动事件的默认滚动效果
            // }
            // event.returnValue =false; 
        }  
 
       function handle(delta) {
            var bodyEl = $('html,body'); //ff和ie需要html，chrome需要body，万恶的兼容性啊 
            var isAnimate = bodyEl.is(":animated"); 
            if (delta < 0) { 
                if (!isAnimate){ 
                // alert("鼠标滑轮向下滚动：" + delta + "次！"); // 1   
                if(event.preventDefault){
                    event.preventDefault();//阻止滚动事件的默认滚动效果
                }
                event.returnValue =false;  //这里的作用不是很明白
                $('html,body').animate({scrollTop:$('#container2').offset().top}, 800);
                return;
                }  
            }
 
            // else{  
            //     // alert("鼠标滑轮向上滚动：" + delta + "次！"); // -1 
            //     $('html,body').animate({scrollTop:$('#container1').offset().top}, 800);   
            //     return; 
            // }  
        }
        function handle2(delta) {
            var bodyEl = $('html,body'); //ff和ie需要html，chrome需要body，万恶的兼容性啊 
            var isAnimate = bodyEl.is(":animated"); 
            mTop = document.getElementById('container2').offsetTop;//div到整个页面顶端的距离，是一个定值
            sTop = $(window).scrollTop(); //页面被滚动条卷去的距离，即超出屏幕上端的长度，是一个变量，随着滚条的变化而变化
            result = mTop - sTop;   //当两者相等的时候，div顶部对齐屏幕的顶部，就是div到达屏幕的最顶端，
                                    //如果两者的差大于0则还没有到达屏幕最顶端 
            console.log('div到整个页面顶端的距离'+ mTop);
            console.log('被滚动条卷去的距离'+ sTop);
            console.log( result);
            if (delta > 0 && result >= 0 && result< mTop*0.3) { 
                if (!isAnimate){  
                // alert("鼠标滑轮向上滚动：" + delta + "次！"); // 1 
                if(event.preventDefault){
                    event.preventDefault();//阻止滚动事件的默认滚动效果
                }
                event.returnValue =false;  //这里的作用不是很明白
                 $('html,body').animate({scrollTop:$('#container1').offset().top}, 800);
                return;  
                }
            }

        }

        //获得滚动条到顶部的距离
        function getScrollTop() {  
            var scrollPos;  
            if (window.pageYOffset) {  
                scrollPos = window.pageYOffset; 
            }else if (document.compatMode && document.compatMode != 'BackCompat'){
                scrollPos = document.documentElement.scrollTop;
            }else if (document.body) {
                scrollPos = document.body.scrollTop; 
            }   
            return scrollPos;   
        }  

        function getAbsPoint(e){
            var x = e.offsetLeft;
            var y = e.offsetTop;
            while(e = e.offsetParent){
                x += e.offsetLeft;
                y += e.offsetTop;
            }
            return {'x': x, 'y': y};
        };

        window.onscroll = function (e) {
            var mTop = document.getElementById('container2').offsetTop;//div到浏览器顶端的距离
            var sTop = $(window).scrollTop();           //页面被滚动条卷去的距离，即超出屏幕上端的长度
            var result = mTop - sTop;   //当两者相等的时候，div顶部对齐屏幕的顶部，就是div到达屏幕的最顶端，
                                    //如果两者的差大于0则还没有到达屏幕最顶端 
            console.log('div到浏览器顶端的距离1'+ mTop);
            console.log('被滚动条卷去的距离1'+ sTop);
            console.log( result);
        }

</script>
</html>